<template>
  <div class="layui-container fly-marginTop">
    <div class="fly-panel" pad20 style="padding-top: 5px">
      <!--<div class="fly-none">没有权限</div>-->
      <div class="layui-form layui-form-pane">
        <div class="layui-tab layui-tab-brief" lay-filter="user">
          <ul class="layui-tab-title">
            <li class="layui-this">编辑帖子<!-- 编辑帖子 --></li>
          </ul>
          <div
            class="layui-form layui-tab-content"
            id="LAY_ucm"
            style="padding: 20px 0"
          >
            <validation-observer ref="observer" v-slot="{ validate }">
              <div class="layui-tab-item layui-show">
                <div class="layui-row layui-col-space15 layui-form-item">
                  <div class="layui-col-md4">
                    <div class="layui-row">
                      <label class="layui-form-label">所在专栏</label>
                      <div class="layui-iput-block">
                        <div class="layui-unselect layui-form-select fir">
                          <div class="layui-select-title">
                            <input
                              type="text"
                              placeholder="请选择"
                              readonly
                              v-model="catalogs[cataIndex].text"
                              class="
                                layui-iput1
                                layui-unselect
                                layui-disabled
                                layui-col-md5
                              "
                            />
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="layui-col-md8">
                    <label for="L_title" class="layui-form-label">标题</label>

                    <div class="layui-input-block">
                      <input
                        type="text"
                        id="L_title"
                        name="title"
                        v-model="title"
                        class="layui-input"
                      />
                      <!-- <input type="hidden" name="id" value="{{d.edit.id}}"> -->
                    </div>
                  </div>
                </div>
                <editor @changeContent="add" :initContent="content"></editor>
                <div class="layui-form-item">
                  <div class="layui-inline">
                    <label class="layui-form-label">悬赏飞吻</label>
                    <div class="layui-input-inline inp" style="width: 150px">
                      <div class="layui-iput-block cc">
                        <div class="layui-unselect layui-form-select aa">
                          <div class="layui-select-title">
                            <input
                              type="text"
                              readonly
                              v-model="favlist[favIndex]"
                              class="
                                layui-iput2
                                layui-disabled
                                layui-unselect
                                layui-col-md5
                              "
                            />
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="layui-form-mid layui-word-aux">
                      发表后无法更改飞吻
                    </div>
                  </div>
                </div>
                <div class="layui-form-item">
                  <validation-provider
                    name="code"
                    ref="codefield"
                    rules="required|length:4"
                    v-slot="{ errors }"
                  >
                    <div class="layui-row">
                      <label
                        for="L_vercode"
                        ref="observer2"
                        class="layui-form-label"
                        >验证码</label
                      >
                      <div class="layui-input-inline">
                        <input
                          type="text"
                          name="code"
                          v-model="code"
                          placeholder="请输入验证码"
                          autocomplete="off"
                          class="layui-input"
                        />
                      </div>
                      <div class>
                        <span
                          class="svg"
                          style="color: #c00"
                          @click="_getCode()"
                          v-html="svg"
                        ></span>
                      </div>
                    </div>
                    <div class="layui-form-mid">
                      <span style="color: #c00">{{ errors[0] }}</span>
                    </div>
                  </validation-provider>
                </div>
                <div class="layui-form-item">
                  <button
                    type="button"
                    class="layui-btn"
                    @click="validate().then(submit)"
                  >
                    立即发布
                  </button>
                </div>
              </div>
            </validation-observer>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { editArticle } from "@/api/content";
// import ListItem from './ListItem'
import CodeMix from "@/mixin/code";
// import { ValidationProvider, ValidationObserver } from "vee-validate";
// import { getCode } from "@/api/login";
import Editor from "../modules/editor/Index";
export default {
  name: "edit",
  props: ["tid", "page"],
  mixins: [CodeMix],
  components: {
    Editor,
  },
  data () {
    return {
      content: "",
      title: "",
      unitName: "请选择",
      cataIndex: 0,
      favIndex: 0,
      isShowSelect: false,
      catalogs: [
        {
          text: "请选择",
          value: "",
        },
        {
          text: "提问",
          value: "ask",
        },
        {
          text: "分享",
          value: "share",
        },
        {
          text: "动态",
          value: "logs",
        },
        {
          text: "公告",
          value: "notice",
        },
        {
          text: "建议",
          value: "advice",
        },
        {
          text: "交流",
          value: "discuss",
        },
      ],
      favlist: [20, 30, 50, 60, 80],
    };
  },

  watch: {},
  mounted () {
    console.log(this.page);
    if (this.page !== "") {
      this.content = this.page.content;
      this.title = this.page.title;
      this.favIndex = this.favlist.indexOf(parseInt(this.page.fav));
      this.cataIndex = this.catalogs.indexOf(
        this.catalogs.filter((item) => item.value === this.page.catalog)[0]
      );
    }
  },
  methods: {
    async submit () {
      const isValid = await this.$refs.observer.validate();
      if (!isValid) {
        // ABORT!!
        return;
      }
      if (this.content.trim() === "") {
        this.$alert("文章内容不能为空");
        return;
      }
      if (this.page.content === this.content) {
        this.$pop("shake", "原来内容不能与现在相同");
        return;
      }
      //修改发帖
      editArticle({
        tid: this.tid,
        title: this.title,
        content: this.content,
        code: this.code,
        sid: this.$store.state.sid,
      }).then((res) => {
        if (res.code === 200) {
          this.$pop("", "修改帖子成功");
          this.content = "";
          setTimeout(() => {
            this.$router.push({ name: "index" });
          }, 2000);
        } else {
          if (res.code === 401) {
            this.$refs.codefield.setErrors([res.msg]);
            this._getCode();
          } else if (res.code === 500) {
            this.$alert(res.msg);
          } else if (res.code === 404) {
            this.$alert(res.msg);
          }
        }
      });
    },
    spcol () {
      this.isSelect = !this.isSelect;
    },
    fav () {
      this.isSelect_fav = !this.isSelect_fav;
    },
    chooseCatalog (item, index) {
      this.cataIndex = index;
    },
    chooseFav (item, index) {
      this.favIndex = index;
    },
    arrowDown () {
      this.isShowSelect = !this.isShowSelect;
    },
    select (item, index) {
      this.isShowSelect = false;
      this.unitModel = index;
      this.unitName = item.value;
    },
    add (val) {
      this.content = val;
    },
  },
};
</script>

<style lang="scss" scoped>
.layui-iput1 {
  display: inline-block;
  height: 38px;
  width: 144px;
  border: 1px solid #e6e6e6;
  padding-left: 15px;
}
.fir dl {
  min-width: 40%;
}
.layui-iput {
  position: relative;
}
.fir dl {
  position: absolute;
  top: 38px;
  left: 108px;
}
.cc {
  position: relative;
}
.layui-anim2 {
  position: absolute;
  top: 38px;
  left: 0px;
}
.aa dl {
  min-width: 60%;
}
.layui-iput2 {
  display: inline-block;
  height: 38px;
  width: 90px;
  border: 1px solid #e6e6e6;
  padding-left: 15px;
}
</style>
